<tr {{ attributes }}>
    <td>
        {% if isEditing %}
            <select
                data-model="product"
                aria-label="Choose a Product"
                class="form-control {{ _errors.has('product') ? 'is-invalid' }}"
            >
                <option value="" {{ not product ? 'selected' }}>Choose a Product</option>
                {% for product_option in products %}
                    <option
                        value="{{ product_option.id }}"
                        {% if product_option == product %}selected{% endif %}
                    >
                        {{ product_option.name }} ({{ product_option.priceInCents|format_currency('USD') }})
                    </option>
                {% endfor %}
            </select>
            {% if _errors.has('product') %}
                <div class="invalid-feedback">
                    {{ _errors.get('product') }}
                </div>
            {% endif %}

        {% else %}
            {{ product.name }}
        {% endif %}
    </td>

    <td>
        {% if not isEditing %}
            {{ product.priceInCents|format_currency('USD') }}
        {% endif %}
    </td>

    <td>
        {% if isEditing %}
            <input
                type="number"
                data-model="quantity"
                aria-label="Quantity"
                class="form-control {{ _errors.has('quantity') ? 'is-invalid' }}"
            >
            {% if _errors.has('quantity') %}
                <div class="invalid-feedback">
                    {{ _errors.get('quantity') }}
                </div>
            {% endif %}
        {% else %}
            {{ quantity }}
        {% endif %}
    </td>
    <td class="text-end text-nowrap">
        {% if isEditing %}
            <button
                data-action="live#action"
                data-live-action-param="save"
                class="btn btn-success btn-sm"
                type="button"
            >Save</button>
        {% else %}
            <button
                data-action="live#action"
                data-live-action-param="edit"
                class="btn btn-primary btn-sm"
                type="button"
            >Edit</button>
        {% endif %}

        <button
            data-action="live#emitUp"
            data-live-event-param="removeLineItem"
            data-live-key-param="{{ key }}"
            class="btn btn-link text-danger btn-sm ml-2"
            type="button"
        ><twig:ux:icon name="cross" /></button>
    </td>
</tr>
